<template>
  <div>
    <group class="formstyle">
    <x-input v-model="forget.account" :placeholder="placeholder.account" :min="8" :max="15">
      <i class="iconfont icon-card2 formicon" slot="label"></i>
    </x-input>
    <x-input :title="page.tel" mask="999 9999 9999" v-model="forget.tel" :placeholder='placeholder.tel'  ref="mobile" :max="13" is-type="china-mobile">
      <i class="iconfont icon-shoujihao formicon" slot="label"></i>
    </x-input>
    <x-input :title="page.vcode" class="weui-vcode">
      <x-button slot="right" type="primary" mini>{{page.cend_vcode}}</x-button>
    </x-input>
    <x-input type="password" :placeholder="placeholder.newPass" v-model="forget.newPass" :min="8" :max="15" @on-change="">
      <i class="iconfont icon-mima formicon" slot="label"></i>
    </x-input>
    </group>
    <div style="margin:100px 30px">
      <x-button type='primary' @click.native="retrievePass">{{page.checkNew}}</x-button>
    </div>
  </div>
</template>
<script>
import Router from '@/router/index'
import { XInput, Group } from 'vux'
export default {
  data() {
    return {
      placeholder: {
        account: '请输入您的账号',
        tel: '请输入绑定手机号',
        newPass: '请输入新密码'
      },
      page: {
        titel: '重置密码',
        back: '返回',
        tel: '绑定手机号',
        account: '账号',
        checkNew: '重置密码',
        vcode: '请输入验证码',
        cend_vcode: '发送验证码'
      },
      forget: {
        tel: '',
        account: '',
        newPass: ''
      }
    }
  },
  components: { XInput, Group },
  methods: {
    onClickLeft() {
      this.$router.goBack()
    },
    retrievePass() {
      this.$post(
        '/user/retrievePass',
        {
          account: this.forget.account,
          tel: this.forget.tel,
          newPass: this.forget.newPass
        },
        '请求失败'
      ).then(res => {
        console.table(res.data)
      })
    }
  }
}
</script>
<style scoped>
.formstyle {
  margin-top: 15px;
  background-color: #efeff4;
  padding: 20px 0;
  border-radius: 10px;
}
.formicon{
  font-size:20px;
  padding-right:20px;
  display:block;
}
</style>
